<template>
    <div class="bottom_loadging">
        <div id="floatingBarsG" v-show="showloading">
            <div class="blockG" id="rotateG_01"></div>
            <div class="blockG" id="rotateG_02"></div>
            <div class="blockG" id="rotateG_03"></div>
            <div class="blockG" id="rotateG_04"></div>
            <div class="blockG" id="rotateG_05"></div>
            <div class="blockG" id="rotateG_06"></div>
            <div class="blockG" id="rotateG_07"></div>
            <div class="blockG" id="rotateG_08"></div>
        </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Navtive API
     *  example : import widget from 'gapi/widget'
     */

    /**
     *  引入Action
     *  example : import { someFunction } from './SomeAction'
     */
    
    /**
     *  引入Getter
     *  example : import { someFunction } from './SomeGetters'
     */

    export default {
        vuex: {
            getters: {
                
            },
            actions: {

            }
        },
        props:['showloading'],
        methods: {
            
        },
        created (){
            
        }
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style type="text/css">
.bottom_loadging{
    height: 30px;
    display: flex;
}
#floatingBarsG{
    position:relative;
    width:15px;
    height:20px;
    margin:auto;
}

.blockG{
    position:absolute;
    background-color:rgb(255,255,255);
    width:2px;
    height:5px;
    border-radius:2px 2px 0 0;
    transform:scale(0.4);
    animation-name:fadeG;
    animation-duration:1.2s;
    animation-iteration-count:infinite;
    animation-direction:normal;
}

#rotateG_01{
    left:0;
    top:8px;
    animation-delay:0.45s;
    transform:rotate(-90deg);
}

#rotateG_02{
    left:2px;
    top:3px;
    animation-delay:0.6s;
    transform:rotate(-45deg);
}

#rotateG_03{
    left:8px;
    top:1px;
    animation-delay:0.75s;
    transform:rotate(0deg);
}

#rotateG_04{
    right:2px;
    top:3px;
    animation-delay:0.9s;
    transform:rotate(45deg);
}

#rotateG_05{
    right:0;
    top:8px;
    animation-delay:1.05s;
    transform:rotate(90deg);
}

#rotateG_06{
    right:2px;
    bottom:2px;
    animation-delay:1.2s;
    transform:rotate(135deg);
}

#rotateG_07{
    bottom:0;
    left:8px;
    animation-delay:1.35s;
    transform:rotate(180deg);
}

#rotateG_08{
    left:2px;
    bottom:2px;
    animation-delay:1.5s;
    transform:rotate(-135deg);
}



@keyframes fadeG{
    0%{
        background-color:rgb(255,76,76);
    }

    100%{
        background-color:rgb(255,255,255);
    }
}

@-o-keyframes fadeG{
    0%{
        background-color:rgb(255,76,76);
    }

    100%{
        background-color:rgb(255,255,255);
    }
}

@-ms-keyframes fadeG{
    0%{
        background-color:rgb(255,76,76);
    }

    100%{
        background-color:rgb(255,255,255);
    }
}

@-webkit-keyframes fadeG{
    0%{
        background-color:rgb(255,76,76);
    }

    100%{
        background-color:rgb(255,255,255);
    }
}

@-moz-keyframes fadeG{
    0%{
        background-color:rgb(255,76,76);
    }

    100%{
        background-color:rgb(255,255,255);
    }
}
</style>

